<template>
  <s-page custom-class="Popup-Page">
    <view>
      <c-demo-block title="基础用法">
        <s-button block @click="centerVisible = true">展示弹出层</s-button>
      </c-demo-block>

      <c-demo-block title="弹出位置">
        <s-button block @click="topVisible = true">顶部弹出</s-button>
        <s-button block @click="bottomVisible = true">底部弹出</s-button>
        <s-button block @click="leftVisible = true">左侧弹出</s-button>
        <s-button block @click="rightVisible = true">右侧弹出</s-button>
      </c-demo-block>

      <c-demo-block title="关闭图标">
        <s-button block @click="iconVisible = true">关闭图标</s-button>
        <s-button block @click="customIconVisible = true">自定义图标</s-button>
        <s-button block @click="colorIconVisible = true">图标颜色</s-button>
      </c-demo-block>

      <c-demo-block title="圆角">
        <s-button block @click="roundVisible = true">圆角</s-button>
      </c-demo-block>

      <c-demo-block title="关闭拦截">
        <s-button block @click="beforeCloseVisible = true">关闭拦截</s-button>
      </c-demo-block>

      <c-demo-block title="自动关闭">
        <s-button block @click="autoCloseVisible = true">2秒后自动关闭</s-button>
      </c-demo-block>

      <c-demo-block title="动画效果">
        <s-button block @click="noAnimateVisible = true">无</s-button>
        <s-button block @click="zoomInVisible = true">zoom-in</s-button>
        <s-button block @click="zoomOutVisible = true">zoom-out</s-button>
        <s-button block @click="fadeTopVisible = true">fade-top</s-button>
        <s-button block @click="fadeBottomVisible = true">fade-bottom</s-button>
        <s-button block @click="customAnimateVisible = true">自定义</s-button>
      </c-demo-block>
    </view>

    <s-popup v-model="centerVisible" background="#fff" width="400" height="400" />

    <s-popup v-model="topVisible" position="top" background="#fff" height="400" />

    <s-popup v-model="bottomVisible" position="bottom" round background="#fff" height="400" />

    <s-popup v-model="leftVisible" position="left" background="#fff" width="400" />

    <s-popup v-model="rightVisible" position="right" background="#fff" width="400" />

    <s-popup v-model="iconVisible" background="#fff" width="400" height="400" closeable />

    <s-popup v-model="customIconVisible" background="#fff" width="400" height="400" closeable close-icon="close" />

    <s-popup v-model="colorIconVisible" background="#fff" width="400" height="400" closeable close-color="red" />

    <s-popup v-model="roundVisible" background="#fff" round width="400" height="400" />

    <s-popup v-model="beforeCloseVisible" background="#fff" width="400" height="400" :before-close="beforeClose" />

    <s-popup v-model="autoCloseVisible" position="center" background="#fff" width="400" height="400" :duration="2000" />

    <s-popup v-model="noAnimateVisible" :animate="false" background="#fff" width="400" height="400" />

    <s-popup v-model="zoomInVisible" animate="zoom-in" background="#fff" width="400" height="400" />

    <s-popup v-model="zoomOutVisible" animate="zoom-out" background="#fff" width="400" height="400" />

    <s-popup v-model="fadeTopVisible" animate="fade-top" background="#fff" width="400" height="400" />

    <s-popup v-model="fadeBottomVisible" animate="fade-bottom" background="#fff" width="400" height="400" />

    <s-popup v-model="customAnimateVisible" background="#fff" animate="custom" width="400" height="400" />
  </s-page>
</template>

<script>
import Dialog from '@/uni_modules/s-ui/utils/dialog';

export default {
  data() {
    return {
      centerVisible: false,
      leftVisible: false,
      rightVisible: false,
      topVisible: false,
      bottomVisible: false,
      beforeCloseVisible: false,
      autoCloseVisible: false,
      iconVisible: false,
      customIconVisible: false,
      colorIconVisible: false,
      roundVisible: false,
      zoomInVisible: false,
      zoomOutVisible: false,
      fadeTopVisible: false,
      fadeBottomVisible: false,
      noAnimateVisible: false,
      customAnimateVisible: false,
    };
  },
  methods: {
    beforeClose() {
      return new Promise(resolve => {
        Dialog({
          title: '提示',
          message: '确认关闭弹框吗',
        }).then(
          () => {
            resolve(true);
          },
          () => {
            resolve(false);
          },
        );
      });
    },
  },
};
</script>

<style lang="scss">
.Popup-Page {
  padding: 0 $padding-md;
  ::v-deep {
    .c-demo-block {
      .s-button {
        margin-right: 30rpx;
        margin-bottom: 20rpx;
        &--block,
        &--large {
          margin-right: 0;
        }
      }
    }

    @keyframes s-animate-custom-enter {
      from {
        opacity: 0;
        transform: rotate(-270deg);
      }

      to {
        opacity: 1;
        transform: rotate(0);
      }
    }
    @keyframes s-animate-custom-leave {
      from {
        opacity: 1;
        transform: rotate(0);
      }

      to {
        opacity: 0;
        transform: rotate(-270deg);
      }
    }

    .s-animate-custom-enter {
      animation-name: s-animate-custom-enter;
    }
    .s-animate-custom-leave {
      animation-name: s-animate-custom-leave;
    }
  }
}
</style>
